<template>
	<view class="ecard">
		<view class="content">
			<text class="name">{{userInfo.nickname}}</text>
			<text class="post" v-if="postName">{{postName}}</text>
			<text class="comp">{{setting.companyName}}</text>
			<view class="divider" />
			<view class="item" v-if="!security">
				<view>
					<image src="/static/ecard/phone-fill.svg" style="width: 30rpx;height: 30rpx;" />
				</view>
				<text class="phone" v-if="userInfo.phone">
					{{userInfo.phone}}
				</text>
			</view>
			<view class="item" v-if="userInfo.email && !security">
				<view>
					<image src="/static/ecard/email-fill.svg" style="width: 30rpx;height: 30rpx;" />
				</view>
				<text class="mail">{{userInfo.email}}</text>
			</view>
			<view class="item">
				<view>
					<image src="/static/ecard/location-fill.svg" style="width: 30rpx;height: 30rpx;" />
				</view>
				<text class="add">{{setting.companyAddr}}</text>
			</view>
		</view>
		<view class="avatar" v-if="setting.currentCardUser?.photo && !photoError">
			<image @error="photoError=true" mode="widthFix" :src="photoUrl"></image>
		</view>
		<view v-if="showToolBar" class="tool-bar">
			<button size="mini" open-type="share" :plain="true" :data-user="userInfo">
				<image src="/static/ecard/shares.svg" style="width: 30rpx;height: 30rpx;" />
			</button>
		</view>
	</view>
	<view v-if="!hideActions" class="actions">
		<button v-if="userInfo.phone" class="action-btn" :plain="true" size="mini" @click="handleOnCall">
			<image src="/static/ecard/call.svg" style="width: 30rpx;height: 30rpx;" />
			拨打电话
		</button>
		<!-- <button class="action-btn" :plain="true" size="mini" @click="handleOnCopyWx">
			<image src="/static/ecard/addWx.svg" style="width: 30rpx;height: 30rpx;" />
			复制微信号
		</button> -->
		<button class="action-btn" :plain="true" size="mini" @click="handleOnSavePhone">
			<image src="/static/ecard/savePhone.svg" style="width: 30rpx;height: 30rpx;" />
			存通讯录
		</button>
	</view>
	<view v-if="!hideShareAction && !security" class="share">
		<button class="action-btn" size="mini" open-type="share" :data-user="userInfo">
			<image src="/static/ecard/share.svg" style="width: 30rpx;height: 30rpx;" />
			分享名片
		</button>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { baseUrl } from '../request/index.js'

	// props
	const props = defineProps({
		userInfo: { prop: Object, default: {} }, // 用户信息
		setting: { prop: Object, default: {} }, // 用户配置
		hideActions: { prop: Boolean, default: false }, // 隐藏功能按钮
		hideShareAction: { props: Boolean, default: false }, // 隐藏分享动作条
		showToolBar: { props: Boolean, default: false }, // 显示工具栏
		security: { prop: Boolean, default: false }, // 安全显示
	})

	// data
	const postName = computed(() => {
		const posts = props.userInfo.posts || []
		const p = posts.filter(p => p.isMain)[0] || posts[0]
		let name = p?.postName
		return props.setting.currentCardUser?.post || name
	})
	const photoUrl = computed(() => {
		const photo = props.setting.currentCardUser?.photo
		if (!photo) return ''
		let url = baseUrl()
		if (process.env.NODE_ENV !== 'development') {
			url += '/$sys'
		}
		return `${url}/api/file/preview/${photo}`
	})
	const photoError = ref(false) // 加载照片异常

	// methods
	const handleOnCall = () => {
		uni.makePhoneCall({
			phoneNumber: props.userInfo.phone,
			fail() {}
		})
	}
	const handleOnCopyWx = (res) => {
		// 微信api不支持获取微信号
	}
	const handleOnSavePhone = () => {
		uni.addPhoneContact({
			firstName: props.userInfo.nickname,
			mobilePhoneNumber: props.userInfo.phone,
			fail() {}
		})
	}
</script>

<style lang="scss" scoped>
	.ecard {
		display: flex;
		margin: 0 40rpx;
		margin-top: 40rpx;
		padding: 40rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		box-sizing: border-box;

		&>.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			font-size: 25rpx;
			color: #515151;

			&>.name {
				font-size: 40rpx;
				font-weight: bold;
			}

			&>.divider {
				height: 0;
				box-sizing: border-box;
				border-bottom: 1px solid rgb(1, 82, 165);
			}
		}

		&>.avatar {
			width: 30%;
			padding-left: 20rpx;

			&>image {
				width: 100%;
			}
		}

		&>.tool-bar {
			padding: 40rpx;
			position: absolute;
			top: 0;
			right: 0;

			&>button {
				padding: 0;
				margin: 0;
				border: none;
			}
		}
	}

	.action-btn {
		color: #ffffff;
		background-color: #1AAD19;
		border-color: #1AAD19;
		margin: 0;
		padding: 5rpx 0;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.actions {
		display: flex;
		padding: 40rpx;
		gap: 20rpx;

		&>button {
			color: #1AAD19;
			background: transparent;
		}
	}

	.share {
		display: flex;
		padding: 40rpx;
		padding-top: 0;
	}

	.item {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	text {
		word-break: break-all;
	}
</style>